<template>
    <div class="content">
        <el-form v-if="view" label-width="110px" :model="userForm" class="userForm">
            <div class="block">
                <el-avatar :size="76" :src="circleUrl"></el-avatar>
                <span>{{ userForm.userName }}</span>
                <div>
                    <el-button size="mini" class="margin-l-25" @click="userEdit">修改个人信息</el-button>
                </div>
            </div>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="userForm.phone" readonly></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="userForm.address" readonly></el-input>
            </el-form-item>
            <el-form-item label="关联公司" prop="companyName">
                <el-input v-model="userForm.companyName" readonly></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="role">
                <el-input v-model="userForm.role" readonly></el-input>
            </el-form-item>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="个人印章" prop="userChapter">
                        <div class="box">
                            <img :src="userForm.userChapter" class="avatar" @click="bigshow(userForm.userChapter)">
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-form-item label="资质证书" prop="userZzzs">
                            <div class="box">
                                <img :src="userForm.userZzzs" class="avatar" @click="bigshow(userForm.userZzzs)">
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog :visible.sync="dialogVisible" width="50%">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <PersonalProfil v-if="!view" :record="userForm" @editClose="editClose" @gettest="gettest"></PersonalProfil>
    </div>
</template>
  
<script type="text/javascript">
import { getUser,  } from '@/api/personal/user';
import PersonalProfil from './personalProfil.vue';
export default {
    name: 'Personal',
    components: { PersonalProfil },
    data () {
        return {
            view: true,
            userForm: {},
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            dialogImageUrl:"",
            dialogVisible:false
        };
    },
    methods: {
        gettest () {
            getUser().then((res) => {
                this.userForm = res.data
                if(res.data.userPhoto){
                    this.circleUrl = res.data.userPhoto
                }else{
                    this.circleUrl ="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                }
            })
        },
        userEdit () {
            this.view = false
        },
        editClose () {
            this.view = true
        },
        bigshow (url) {
            this.dialogImageUrl = url
            this.dialogVisible = true
        },
    },
    mounted () {
        this.gettest()
    }
}

</script>
  
<style lang="less" scoped>
.content {
    background-color: #ffffff;
    border-radius: 5px;
    width: 88%;
    margin: 40px 10px 10px;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/deep/ .el-form-item__label {
    font-size: 14px;
}

.block {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}

span {
    line-height: 76px;
    margin-left: 1rem;
}

.userForm /deep/ .el-input--medium .el-input__inner {
    border: none;
    font-size: 14px;
}

.avatar {
    width: 146px;
    height: 146px;
    object-fit: contain;
    display: block;
}
:deep .el-dialog__header {
    display: none;
}
</style>
  